<template>
  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
    <div class="container">
      <a
        href="javascript:void(0)"
        id="switch_dark"
        class="icon iconfont toggle toggle--on"
        >&#xe619;</a
      >
      <router-link to="/" title="首页" class="navbar-brand js-scroll-trigger">
        <img
          class="logo img-fluid"
          src="../../public/static/logo/logo.png"
          alt=""
          style="width: 120px"
        />
        <img
          class="logo-dark img-fluid"
          src="../../public/static/logo/logo-dark.png"
          alt=""
          style="width: 120px"
        />
      </router-link>
      <button
        class="navbar-toggler navbar-toggler-left"
        type="button"
        data-toggle="collapse"
        data-target="#navbarResponsive"
        aria-controls="navbarResponsive"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <i class="icon iconfont" style="font-size: 23px; line-height: 25px"
          >&#xe62a;</i
        >
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav text-uppercase ml-auto">
          <li
            class="nav-item"
            :class="{ active: this.$route.path === '/home' }"
          >
            <router-link :to="{ name: 'Home' }">
              <a class="nav-link js-scroll-trigger iconfont" href="JavaScript:0">&#xe627;首页</a>
            </router-link>
          </li>
          <li
            class="nav-item"
            :class="{ active: this.$route.path === '/note' }"
          >
            <router-link :to="{ name: 'Note' }">
              <a class="nav-link js-scroll-trigger" href="JavaScript:0">笔记</a>
            </router-link>
          </li>
          <li
            class="nav-item"
            :class="{ active: this.$route.path === '/demo' }"
          >
            <router-link :to="{ name: 'Demo' }">
              <a class="nav-link js-scroll-trigger" href="JavaScript:0">作品</a>
            </router-link>
          </li>
          <li
            class="nav-item"
            :class="{ active: this.$route.path === '/about' }"
          >
            <router-link :to="{ name: 'About' }">
              <a class="nav-link js-scroll-trigger" href="JavaScript:0">关于</a>
            </router-link>
          </li>
          <li
            class="nav-item"
            :class="{ active: this.$route.path === '/admin' }"
          >
            <router-link :to="{ name: 'Admin' }">
              <a class="nav-link js-scroll-trigger" href="JavaScript:0">管理</a>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      menuList: [],
    };
  },
  methods: {
    // 菜单列表：/api/home/menu
    getMenuList() {
      this.$http
        .menuList()
        .then((res) => {
          this.menuList = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getMenuList();
  },
};
</script>

<style lang="css" scoped>
</style>
